<template>
  <div class="flex-col user">
    <div class="page-title">个人信息</div>
    <div class="flex-row user-page" v-if="userInfo">
      <div class="flex-col user-form">
        <div class="flex-col user-form-item">
          <span>账户名称</span>
          <el-input type="text" v-model="form.name" placeholder="请输入" />
        </div>
        <div class="flex-col user-form-item">
          <span>个人简介</span>
          <el-input type="textarea" v-model="form.desc" placeholder="个人简介" rows="5"></el-input>
        </div>
        <div class="flex-col user-form-item">
          <span>所在省市</span>
          <div class="flex-row user-form-row">
            <el-select v-model="form.province" placeholder="请选择" size="large" @change="changeProv($event)">
              <el-option v-for="item in provList" :key="item.label" :label="item.label" :value="item.label" />
            </el-select>
            <el-select v-model="form.city" placeholder="请选择" size="large" @change="changeCity($event)">
              <el-option v-for="item in cityList" :key="item.label" :label="item.label" :value="item.label" />
            </el-select>
          </div>
        </div>

        <el-button type="primary" @click="clickSubmit">提交</el-button>
      </div>
      <div class="flex-col user-avatar">
        <el-col>
          <div class="user-avatar-title">用户头像</div>
          <el-upload
            action="#"
            :auto-upload="false"
            accept="image/jpeg,image/gif,image/png"
            :on-change="form.uploadAvatar"
          >
            <el-avatar :size="122">
              <img :src="userInfo.avatar_url" alt="" v-if="userInfo.avatar_url" />
              <img v-else src="@/assets/img/home/avatar.png" alt="" />
            </el-avatar>
          </el-upload>
          <el-upload
            action="#"
            :auto-upload="false"
            accept="image/jpeg,image/gif,image/png"
            :on-change="form.uploadAvatar"
          >
            <el-button size="large"
              ><el-icon class="el-icon--left" :size="15"><Upload /></el-icon>上传头像</el-button
            >
          </el-upload>
        </el-col>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue';
import {ElMessage} from 'element-plus';
import {Upload} from '@element-plus/icons-vue';
import {allList} from './index';
import personalApi from '@/api/personalApi';

const userInfo = ref(null);
const form = reactive({
  name: '',
  desc: '',
  province: '',
  city: '',
  uploadAvatar: (res) => {
    personalApi
      .uploadAvatar({file: res.raw})
      .then((data) => {
        if (data.status === 0) {
          ElMessage.success(data.message);
          getUserInfo();
        }
      })
      .catch((err) => {
        throw err;
      });
  },
});
const provList = ref([]);
const cityList = ref([]);
// 选择省份
const changeProv = (e) => {
  form.province = e;
  form.city = '';
  allList.forEach((item) => {
    if (item.label === e) {
      cityList.value = item.cityList;
    }
  });
};
// 选择市
const changeCity = (e) => {
  form.city = e;
};
// 提交
const clickSubmit = () => {
  personalApi
    .updateUserInfo({
      name: form.name,
      desc: form.desc,
      province: form.province,
      city: form.city,
    })
    .then((res) => {
      if (res.status === 0) {
        ElMessage.success(res.message);
      }
    })
    .catch((err) => {
      throw err;
    });
};
// 获取个人信息
const getUserInfo = () => {
  personalApi
    .getUserInfo()
    .then((res) => {
      userInfo.value = res.data;
      form.name = res.data.name;
      form.desc = res.data.desc;
      form.province = res.data.province;
      form.city = res.data.city;
    })
    .catch((err) => {
      throw err;
    });
};
onMounted(() => {
  provList.value = allList;
  getUserInfo();
});
</script>
<style lang="scss" scoped>
.user {
  width: calc(100% - 50px);
  height: calc(100% - 40px);
  display: flex;
  background: #fff;
  margin: 20px 30px;
  padding: 20px 30px;
  box-sizing: border-box;
  &-page {
    justify-content: space-between;
  }
  .page-title {
    font-size: 18px;
    color: #999999;
    line-height: 28px;
    margin-bottom: 31px;
  }

  &-form {
    width: 496px;
    &-item {
      margin-bottom: 46px;
      span {
        display: inline-block;
        margin-bottom: 14px;
      }
      &:deep(.el-select) {
        width: 239px;
        .el-input__inner {
          height: 32px;
        }
      }
    }
    &-row {
      justify-content: space-between;
    }

    .el-button {
      width: 98px;
      height: 36px;
      border-radius: 2px;
    }
  }

  &-avatar {
    flex: 1;
    font-size: 13px;
    color: #3c4353;
    align-items: center;
    &-title {
    }
    .el-avatar {
      margin-bottom: 26px;
      margin-top: 39px;
    }
    .el-button {
      width: 123px;
      height: 32px;
      color: #838a9d;
      font-size: 13px;
    }
    &:deep(.el-upload-list) {
      display: none;
    }
  }
}
</style>
